<template>
  <div class="home">
   <!-- <keep-alive v-if="showPage">
      <page-one ></page-one>
   </keep-alive>
    <keep-alive v-else>
    <page-two ></page-two>
    </keep-alive> -->
    <!-- 使用component渲染组件的时候 该动态就为动态组件 is="组件名" -->
    <keep-alive>
         <component :is="componentName"></component>
    </keep-alive>
   
    <!-- <button @click="showPage=!showPage">切换组件</button> -->
    <button @click="cut">切换组件</button>
  </div>
</template>

<script>
// @ is an alias to /src
import pageOne from '@/components/pageOne.vue'
import pageTwo from '@/components/pageTwo.vue'
export default {
//   name: 'HomeView',
  components: {
    pageOne,
    pageTwo
  },
  data() {
    return {
        showPage:true,
        componentName:'pageOne'
    }
  },
  methods: {
    cut(){
        this.componentName = this.componentName =="pageOne"?'pageTwo':"pageOne"
    }
  },
}
</script>
